"use client";

import SearchSection from "@/components/searchSection";
import { useTranslations } from "next-intl";
import { useEffect } from "react";
import { useRouter } from "next/navigation";

export default function InductiveType({
  params,
}: {
  params: { locale: string };
}) {
  const router = useRouter();
  const config = [
    {
      title: "inductive.in_method_title",
      key: "InstallationMethod",
      i18n: [
        "inductive.in_method1",
        "inductive.in_method2",
        "inductive.in_method3",
        "inductive.in_method4",
        "inductive.in_method5",
      ],
    },
    {
      title: "inductive.pro_grade_title",
      key: "ProtectionLevel",
      i18n: [
        "inductive.pro_grade1",
        "inductive.pro_grade2",
        "inductive.pro_grade3",
      ],
    },
  ];
  const t = useTranslations("home");

  useEffect(() => {
    const local = localStorage.getItem("i18n_local");
    if (local != params.locale) {
      router.push(`/${params.locale}/product`);
    }
  }, [params, router]);
  return (
    <div className={"bg-gray-300 overflow-hidden"}>
      <div
        className={"bg-gray-300 mb-3 h-72"}
        style={{
          background:
            "url('http://i18nport.dongsongkeji.com.cn/upload/14aa8e43-b41a-5f64-b93c-cbfb20b86c04.webp')",
          backgroundPosition: "50%",
        }}
      >
        <ul
          className={
            "max-w-7xl flex py-10 h-full flex-col mx-auto font-bold text-2xl text-black px-12"
          }
        >
          <li>展品中心</li>
          <li className={"text-xl font-semibold my-6"}>PRODUCT CENTER</li>
          <li>Продукция</li>
        </ul>
      </div>
      <SearchSection
        config={config}
        type={t("four.product")}
        path={t("four.product")}
      ></SearchSection>
    </div>
  );
}
